<template>
  <div class="attach contract-attach">
    <div v-for="(item, index) in attachSrcsList"
         :key="index"
         class="create create-contract">
      <div v-if="item.type === 'file'">
        <span class="create_attach">
          <img :src="item.url"
               class="file-icon"
               @click="onload(item.attachUrl)" />
          <i v-if="!isDisabled"
             class="el-icon-close clear-attach-icon"
             @click="clearAttach(attachList, index)" />
        </span>
        <span class="create-name"
              :title="item.attachName">{{
          item.attachName
        }}</span>
      </div>
      <!-- 图片预览 -->
      <div v-if="item.type === 'picture'">
        <span class="create_attach">
          <el-image style="width: 100px; height: 100px"
                    :src="item.url"
                    :preview-src-list="previewSrcList" />
          <i v-if="!isDisabled"
             class="el-icon-close clear-attach-icon"
             @click="clearAttach(attachList, index)" />
        </span>
        <span class="create-name"
              :title="item.attachName">{{
          item.attachName
        }}</span>
      </div>
    </div>
  </div>
</template>

<script>
import { encodeAndReplaceFileNameInUrl } from "@/libs/util"
export default {
  props: {
    attachList: {
      type: Array,
      default: () => { }
    },
    isDisabled: {
      type: Boolean,
      default: false
    },
    // srcList: {
    //   type: Array,
    //   default: () => []
    // }
  },
  computed: {
    attachSrcsList () {
      return this.attachList.map(item => {
        return {
          ...item,
          url: encodeAndReplaceFileNameInUrl(item.imgUrl || item.url || item.attachUrl)
        }
      })
    },
    previewSrcList () {
      return this.attachList
        .filter(item => item.type === 'picture')
        .map(src => encodeAndReplaceFileNameInUrl(src.imgUrl || src.url || src.attachUrl))
    }
  },
  methods: {
    onload (url) {
      window.location.href = url
    },
    clearAttach (arrItem, index) {
      this.$emit("delete", arrItem, index);
    }
  }
};
</script>

<style lang="scss" scoped>
.contract-attach {
  // display: flex;
  .create {
    margin: 7px 7px 7px 0;
    width: 100px;
    height: 120px;
    float: left;
    justify-content: space-between;
    border: none;
    .create_attach {
      position: relative;
      border-right: 1px solid #c0c4cc !important;
      margin-right: 5px;
      border: 1px solid #c0c4cc;
      border-right: none;
      height: 100px;
      width: 100%;
      float: left;
      .clear-attach-icon {
        position: absolute;
        right: 4px;
        top: 4px;
        font-size: 16px;
        font-weight: bold;
        cursor: pointer;
      }
      .file-icon {
        cursor: pointer;
        display: block;
        // width: 100%;
        // max-height: 80px;
        max-width: 100%;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        image-rendering: auto;
        image-rendering: crisp-edges;
        // image-rendering: pixelated;
      }
    }
    .create-name {
      text-align: center;
      display: inline-block;
      width: 100%;
      line-height: 22px;
      margin-top: 4px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }
  .create:nth-child(4) .create_attach,
  .create:last-child .create_attach {
    border-right: 1px solid #c0c4cc;
  }
}
</style>
